<template>
    <div>
        <!-- 顶部轮播图 -->
        <swiper indicator-dots indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff">
            <swiper-item :key="item.pics_id" v-for="item in detail.pics">
                <image :src='item.pics_big_url' />
            </swiper-item>
        </swiper>
        <!-- 基本信息 -->
        <view class="meta">
            <view class="price">￥{{ detail.goods_price }}</view>
            <view class="name">{{ detail.goods_name }}</view>
            <view class="shipment">快递:{{ detail.goods_state === 2 ? '免邮费' : '不包邮' }}</view>
            <view class="collect icon-star">收藏</view>
        </view>
        <!-- 商品详情 -->
        <view class="detail">
            <view :style='{ fontSize: 0 }' v-html='detail.goods_introduce'></view>
            <!-- <rich-text :style='{fontSize: 0}' :nodes='goods.goods_introduce'></rich-text> -->
        </view>
        <!-- 操作 -->
        <view class="action">
            <button open-type="contact" class="icon-handset">联系客服</button>
            <text class="cart icon-cart" @click='gotoCart'>购物车</text>
            <text class="add" @click='addCart'>加入购物车</text>
            <text class="buy" @click='toBuy'>立即购买</text>
        </view>
    </div>
</template>
<script>
import { getdetail } from '@/api/logo.js'; // 引入api
export default {
    data() {
        return {
            titile: '详情',
            gid: null,
            detail: {}, // 商品详情数据
            // 购物车数组
            cart: uni.getStorageSync('mycart') || []

        }
    },
    onLoad(params) {
        this.gid = params.id
        this.loadDetailData()
    },
    methods: {
        gotoCart() {
            // 跳转到购物车页面
            uni.switchTab({
                url: '/pages/cart/index'
            })
        },
        toBuy() {
            // 先加入购物车，在跳转到购物车页面
            this.addCart()
            // 因为这里是菜单页，所以要用switchTab
            uni.switchTab({
                url: '/pages/cart/index'
            })
        },
        addCart() {
            // 加入购物车： 获取商品的相关信息，然后添加到购物车数组中
            const info = {
                goods_id: this.detail.goods_id,
                goods_name: this.detail.goods_name,
                goods_price: this.detail.goods_price,
                goods_num: 1,
                goods_icon: this.detail.goods_small_logo,
                goods_flag:false  // 判断是否选中
            }
            // 判断购物车中是否已经存在某个商品
            const flag = this.cart.some(item => {
                return item.goods_id === this.detail.goods_id
            })
            if (flag) {
                // 商品已经存在，如果存在商品数量加一
                this.cart.some(item => {
                    if (item.goods_id === this.detail.goods_id) {
                        item.goods_num += 1
                        // 终止继续遍历
                        return true
                    } else {
                        return false
                    }
                })
            } else {
                // 把要购买的商品数据添加到购物车
                this.cart.push(info)
            }

            // 把购物车数据缓存起来
            uni.setStorageSync('mycart', this.cart)
            // 添加提示
            uni.showToast({
                title: '添加购物车成功'
            })
        },
        async loadDetailData() {
            // 根据商品id查询商品的详细数据
            const data = await getdetail({
                goods_id: this.gid
            })
            console.log('rrrrrrrrrr', data);
            if (data.meta.status === 200) {
                this.detail = data.message
            } else {
                uni.showToast({
                    title: data.meta.msg
                })
            }
        }
    }
}
</script>
<style lang='less'>
swiper {
    width: 750rpx;
    height: 640rpx;
    margin-top: 10rpx;

    image {
        width: 750rpx;
        height: 640rpx;
    }
}

/* 基本信息 */
.meta {
    height: 250rpx;
    line-height: 1;
    padding: 30rpx 180rpx 30rpx 20rpx;
    box-sizing: border-box;
    background-color: #fff;
    position: relative;

    .price {
        font-size: 36rpx;
        color: #ea4451;
        margin-bottom: 20rpx;
    }

    .name {
        color: #333;
        line-height: 1.4;
        font-size: 33rpx;

        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .shipment {
        font-size: 27rpx;
        color: #999;
        position: absolute;
        bottom: 30rpx;
    }

    .collect {
        width: 140rpx;
        height: 88rpx;
        text-align: center;
        box-sizing: border-box;
        border-left: 1rpx solid #ddd;
        font-size: 24rpx;
        color: #999;

        position: absolute;
        right: 10rpx;
        top: 91rpx;
    }

    [class*="icon-"]::before {
        display: block;
        font-size: 45rpx;
        margin-bottom: 10rpx;
    }
}

/* 详细信息 */
.detail image {
    width: 100%;
    height: 480rpx;
    margin-top: 20rpx;
    background-color: blue;
}

/* 底部菜单 */
.action {
    width: 100%;
    height: 98rpx;
    background-color: #fff;

    position: fixed;
    left: 0;
    bottom: 0;

    display: flex;
    align-items: center;

    text {
        display: block;
    }

    .add,
    .buy {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 210rpx;
        text-align: center;
        font-size: 27rpx;
        color: #fff;
    }

    .add {
        background-color: #f4b73f;
    }

    .buy {
        background-color: #ea4451;
    }

    button {
        padding: 0;
        border-radius: 0;
        background-color: #fff;

        &::after {
            border: none;
        }
    }

    button,
    .cart {
        flex: 1;
        text-align: center;
        color: #989898;
        font-size: 24rpx;
        box-sizing: border-box;
    }

    [class*="icon"]::before {
        display: block;
        font-size: 45rpx;
        margin-bottom: 2rpx;
    }
}
</style>